<template>
  <m-page>
    <!-- 融易通卡主页 -->
    <m-header title="融易通卡主页"></m-header>
    <div class="card_information">
      <!-- 融易通卡信息 -->
      <ynet-cell-item title="融易通信用卡" brief="6223 **** **** 9876">
        <span class="holder" slot="left"></span>
        <!-- 当融易通卡未激活时显示激活按钮 -->
        <!-- 当融易通卡已激活时显示密码设置按钮 -->
        <ynet-button
          class="card_item_right"
          type="warning"
          round
          size="small"
          slot="right"
          v-if="this.isActived == '0'"
          @click="gotoActivation()"
        >激活</ynet-button>
        <ynet-button
          class="card_item_right"
          type="defalut"
          round
          size="small"
          slot="right"
          v-if="this.isActived == '1'"
          @click="gotoPwdOracle()"
        >密码设置</ynet-button>
      </ynet-cell-item>
      <!-- 融易通卡额度相关 -->
      <div class="card_quota">
        <div class="total_quota">
          <p class="total_quota_title">总额度(元)</p>
          <ynet-amount :value="2000" has-separator :precision="2" />
          <p class="quota_message" v-if="this.isActived == '0'">激活额度才可以进行申请用款和提现操作</p>
          <p class="used_quota" v-if="this.isActived == '1'">
            已用额度：
            <span>
              <ynet-amount :value="12000" has-separator :precision="2" />
            </span>
          </p>
        </div>
        <div class="quota_operation">
          <div class="surplus_amount">
            <p>剩余额度(元)</p>
            <ynet-amount :value="0" has-separator :precision="2" />
            <ynet-button
              type="warning"
              size="small"
              round
              v-if="this.isActived == '1'"
              @click="gotoApplyMoney()"
            >申请用款</ynet-button>
            <ynet-button type="disabled" size="small" round v-if="this.isActived == '0'">申请用款</ynet-button>
          </div>
          <div class="available_cash">
            <p>可用现金额(元)</p>
            <ynet-amount :value="0" has-separator :precision="2" />
            <ynet-button
              type="warning"
              size="small"
              round
              v-if="this.isActived == '1'"
              @click="gotoWithdrawMoney()"
            >提现</ynet-button>
            <ynet-button type="disabled" size="small" round v-if="this.isActived == '0'">提现</ynet-button>
          </div>
        </div>
      </div>
      <!-- 应还款信息 -->
      <div class="repayment_information">
        <ynet-cell-item title="本期剩余应还(元)" no-border>
          <span slot="default">
            <ynet-amount :value="0" has-separator :precision="2" />
          </span>
          <p slot="right">02月02日还款</p>
        </ynet-cell-item>
        <div class="repayment_setup">
          <div :class="{'red':this.isActived == '0'}" @click="gotoRepayment()">一键还款</div>
          <div :class="['my_account',{'red':this.isActived == '0'}]" @click="gotoMyBill()">我的账单</div>
          <div :class="{'red':this.isActived == '0'}" @click="gotoApplySetting()">还款设置</div>
        </div>
      </div>
    </div>
  </m-page>
</template>   

<script>
import { CellItem, Button, Amount } from "ynet-mobile";
export default {
  components: {
    [CellItem.name]: CellItem,
    [Button.name]: Button,
    [Amount.name]: Amount
  },
  data() {
    return {
      isActived: "1", //0 为未激活 1为已激活
      hasPassword: "1" // 0为未设置密码 1为已设置密码
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 设置密码弹框
    showConfirm() {
      app.api
        .confirm("您还没有设置交易密码，赶快去设置吧。", "温馨提示", {
          okButton: "去设置",
          cancelButton: "暂不设置",
          clickBgToHide: false,
          cancelGrayStyle: false
        })
        .then(res => {
          if (res == "ok") {
            //点击去设置 跳转至密码设置页面
            this.goto('home_passwd_oracle.html')
          }
        });
    },
    //页面跳转
    goto(item , params) {
      let url = `smallbusinessloan/rong_yi_tong_card/${item}`
      app.api.pushWindow( url ,params )
    },
    //申请用款按钮   点击进入申请用款页  如未设置密码则弹框提示
    gotoApplyMoney() {
      if (this.hasPassword == "0") {
        this.showConfirm();
      } else {
        this.goto("apply_information.html");
      }
    },
    //提现按钮  点击进入提现页  如未设置密码则弹框提示
    gotoWithdrawMoney() {
      if (this.hasPassword == "0") {
        this.showConfirm();
      } else {
        this.goto("withdraw_information.html");
      }
    },
    //一键还款按钮  点击进入还款页面  如未设置密码则弹框提示
    gotoRepayment() {
       if (this.hasPassword == "0") {
        this.showConfirm();
      } else {
        this.goto("repayment_page.html");
      }
    },
    //我的账单按钮  点击进入账单页
    gotoMyBill() {
      this.goto('bill_my_bill.html')
    },
    //还款设置按钮  点击进入还款设置页
    gotoApplySetting() {
      this.goto('autopay_select.html')
    },
    //激活按钮 点击前往 卡激活页面
    gotoActivation(){
      this.goto('home_card_activation.html')
    },
    // 密码设置按钮  点击前往 密码设置页
    gotoPwdOracle(){
      this.goto('home_passwd_oracle.html')
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

